import { useGameStore } from '../../store/gameStore';
import Board from '../Board/Board';
import PlayerPanel from '../Player/PlayerPanel';
import GameControls from './GameControls';
import Notifications from './Notifications';

export default function GameScreen() {
  const game = useGameStore(state => state.game);
  const ui = useGameStore(state => state.ui);

  if (!game) return null;

  const currentPlayer = game.players[game.currentPlayerIndex];

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-600 to-blue-600 p-4">
      <div className="max-w-7xl mx-auto">
        {/* 顶部信息栏 */}
        <div className="bg-white rounded-lg shadow-lg p-4 mb-4">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-2xl font-bold text-purple-600">大富翁游戏</h2>
              <p className="text-gray-600">回合 {game.turn}</p>
            </div>
            <div className="text-right">
              <p className="text-sm text-gray-600">当前玩家</p>
              <p className="text-xl font-bold">{currentPlayer.character.avatar} {currentPlayer.name}</p>
              <p className="text-lg text-green-600">${currentPlayer.money}</p>
            </div>
          </div>
        </div>

        {/* 主游戏区域 */}
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
          {/* 左侧：玩家面板 */}
          <div className="lg:col-span-1 space-y-4">
            {game.players.map(player => (
              <PlayerPanel key={player.id} player={player} />
            ))}
          </div>

          {/* 中间：游戏棋盘 */}
          <div className="lg:col-span-2">
            <Board />
          </div>

          {/* 右侧：游戏控制 */}
          <div className="lg:col-span-1">
            <GameControls />
          </div>
        </div>
      </div>

      {/* 通知 */}
      <Notifications />
    </div>
  );
}
